<script setup lang="ts">
import { useRouter } from "vue-router";
import { reactive, ref } from "@vue/reactivity";
// 未登录时，组件
import notLogin from "@/components/index/notLogin.vue";
// 登录成功后的
import loginEnd from "@/components/index/loginEnd.vue";
// 主体部分
import swipers from "@/components/index/swipers.vue";
// 投诉、查询、案例、法规、中心
import navs from "@/components/index/navs.vue";
// 案例
import cases from "@/components/index/cases.vue";
// 底部主办单位
import footers from "@/components/common/footers.vue";
// 民营经济投诉服务中心须知
import notice from "@/components/index/notice.vue";
// 引入 userStore 在piain中保存了用户信息
import userStore from "../stores/user";
// 封装了 ajax 用于请求数据
import ajax from "../request/ajax";
// 用户数据管理中心
let newUser: any = userStore();
// 路由管理
let router = useRouter();

// 打开页面
let open = (path: string): void => {
  console.log("path", path);
  if (!path) return;
  router.push({ path });
};

// 退出登录,将用户信息设置为默认值(初始值的状态)
let outLogin = (v: unknown) => {
  newUser?.changeUserInfo(v);
};

// 显示须知通知
let isNotice = ref(false);

// 案例
let caseList: { rendered: string; time: string }[] = reactive([]);
// 政策法规
let statuteList: { rendered: string; time: string }[] = reactive([]);
// 新闻通知
let newList: { rendered: string; time: string }[] = reactive([]);
// 工作状态
let objList: { rendered: string; time: string }[] = reactive([]);
// 公示公告
let noticeList: { rendered: string; time: string }[] = reactive([]);
// 轮播图组件的数据
let imags: { src?: string; title?: string }[] = reactive([]);

// 获取新闻列表页面
(async () => {
  let res: any = await new ajax("system/testacc/peall/get_list")?.get({
    user_id: "93",
  });
  // 每次清空数据，再重新放入数据
  caseList.length = 0;
  // 只要前面五条数据
  for (let i = 0; i < 5; i++) {
    let v = res?.data[i];
    caseList.push({
      rendered: v?.content,
      time: v?.winTime.substr(0, 10),
    });
  }
})();

// 获取新闻列表页面
(async () => {
  let res: any = await new ajax("system/testacc/release/list/type")?.get({
    info_type: "1",
  });
  // 每次清空数据，再重新放入数据
  newList.length = 0;
  newList.push(...res?.data);
  // thumbnail
  // rendered
  // 只要前面五条数据
  newList.length = 5;

  // 先清空数据
  imags.length = 0;
  for (let v of res?.data) {
    imags.push({
      src: `https://nntzback.jyhdkj.com${v.thumbnail}`,
      title: v.rendered,
    });
  }
})();

// 获取工作动态
(async () => {
  let res: any = await new ajax("system/testacc/release/list/type")?.get({
    info_type: "2",
  });
  // 每次清空数据，再重新放入数据
  objList.length = 0;
  objList.push(...res?.data);
})();

// 政策法规
(async () => {
  let res: any = await new ajax("system/testacc/release/list/type")?.get({
    info_type: "3",
  });
  // 每次清空数据，再重新放入数据
  statuteList.length = 0;
  statuteList.push(...res?.data);
})();

// 公示公告
(async () => {
  let res: any = await new ajax("system/testacc/release/list/type")?.get({
    info_type: "4",
  });
  // 每次清空数据，再重新放入数据
  noticeList.length = 0;
  noticeList.push(...res?.data);
})();
</script>

<template>
  <div class="index">
    <!-- 服务中心、登录、注册 -->
    <div class="header">
      <!-- 未登录（当用户信息不存在时） -->
      <notLogin v-if="!newUser.userInfo.name" />
      <!-- 登录成功后 -->
      <loginEnd v-else :userInfo="newUser.userInfo" @outLogin="outLogin" />
      <!-- 搜索框 -->
      <label class="search">
        <input type="text" placeholder="请输入关键字" />
        <span class="icon">&#xe651;</span>
      </label>
    </div>
    <div class="main">
      <!-- 轮播图 -->
      <swipers :imgs="imags" />
      <!-- 投诉、查询、法规、案例、帮助中心、公众号、小程序 -->
      <navs @showNotice="isNotice = true" @open="open" />
      <!-- 案例 -->
      <cases cls="cls" title="典型案例" :list="caseList" />
      <!-- 政策法规 -->
      <cases title="政策法规" :list="statuteList" />
      <!-- 新闻通知 -->
      <cases title="新闻通知" :list="newList" @open="open" path="/newNotice" />
      <!-- 工作动态 -->
      <cases title="工作动态" :list="objList" />
      <!-- 公示公告 -->
      <cases title="公示公告" :list="noticeList" />
    </div>

    <!-- 我要投诉 -->
    <notice v-if="isNotice" @open="open" @close="isNotice = false" />

    <footers />
  </div>
</template>

<style scoped lang="scss">
.index {
  min-height: inherit;
  @include flexColumnCenter;
  position: relative;

  background: #f1f2f3 url("@/assets/index/bg.webp") no-repeat fixed center top;
  background-size: 100%;
}

// 首页头部，登录，注册--
.header {
  width: 1000px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  color: #fff;

  // 背景图片
  background: transparent url("@/assets/logo.webp") no-repeat scroll left bottom;
  background-size: 322px 62px;
}
// 搜索框
.search {
  width: 300px;
  height: 36px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  padding: 0px 14px;
  background-color: #ffffff;
  gap: 0px 10px;
  > input {
    height: 100%;
    color: #333;
    flex: 1;
  }
  > .icon {
    color: #bbc0ca;
    font-size: 16px;
    @include flexCenterCenter;
    cursor: pointer;
  }
}
// 首页头部，登录，注册=

.main {
  width: 1000px;
  margin: 44px 0 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 369px repeat(2, 283px);
  gap: 16px;
}
</style>
